<template>
  <div class="app-container">
      <el-row :gutter="20">
        <!-- 左侧商品、支付信息录入表单 -->
        <el-col :span="6" :xs="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>商品录入</span>
            </div>
            <el-form :model="enterItemForm"  ref="enterItemForm" :rules="enterItemRules" size="small" label-width="68px" >
                <el-form-item label="商品编码" prop="itemSn">
                    <el-input v-model="enterItemForm.itemSn" placeholder="请输入条码" clearable @keyup.enter.native="enterSaleItem"/>
                </el-form-item>
                <el-form-item label="订购数量" prop="quantity">
                    <el-input v-model="enterItemForm.quantity" clearable @keyup.enter.native="enterSaleItem"/>
                </el-form-item>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-button type="primary" size="mini" :disabled="step!==2" @click="enterSaleItem">ENTER ITEM</el-button>
                    </el-col>
                    <el-col :span="12">
                        <el-button type="warning" size="mini" :disabled="step !==2 || saleItemList.length == 0" @click="endSale">END SALE</el-button>
                    </el-col>
                </el-row>
            </el-form>
          </el-card>

          <el-card class="box-card"> 
            <div slot="header" class="clearfix">
              <span>订单支付</span>
            </div>
            <el-form :model="makePaymentForm" ref="makePaymentForm" :rules="makePaymentRules" size="small" label-width="68px">
                <el-form-item label="付款金额" prop="cashTendered">
                    <el-input v-model="makePaymentForm.cashTendered"></el-input>
                </el-form-item>
                <el-form-item label="找零">
                    <el-input v-model="changeDue" disabled></el-input>
                </el-form-item>
                  <el-form-item>
                    <el-button type="danger" size="mini" :disabled="step!==4" @click="makePayment">MAKE PAYMENT</el-button>
                </el-form-item>
            </el-form>
          </el-card>
        </el-col>

        <!-- 左侧商品、支付信息录入表单 -->
        <el-col :span="18" :xs="24">
           <el-descriptions border >
              <template slot="extra">
                  <el-button type="success" size="small" round :disabled="step!==1" @click="makeNewSale">Make NEW SALE</el-button>
              </template>
              <el-descriptions-item label="会员">张三</el-descriptions-item>
              <el-descriptions-item label="订单号">{{orderInfo.saleNo}}</el-descriptions-item>
              <el-descriptions-item label="总金额">{{orderInfo.total}}</el-descriptions-item>
              <el-descriptions-item label="总件数">{{totalQuantity}}</el-descriptions-item>
              <el-descriptions-item label="状态"><el-tag size="small">{{orderInfo.status}}</el-tag></el-descriptions-item>
              <el-descriptions-item label="备注">暂无</el-descriptions-item>
          </el-descriptions>
          <br>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>订单明细</span>
            </div>
            <el-table :data="saleItemList" :row-class-name="rowSaleItemIndex">
              <el-table-column label="序号" align="center" prop="index" width="55" />
              <el-table-column label="商品编号" align="center" prop="itemSn" />
              <el-table-column label="商品名称" align="center" prop="productName" />
              <el-table-column label="价格" align="center" prop="price" />
              <el-table-column label="数量" align="center" prop="quantity">
                  <template slot-scope="scope">
                      <el-input-number size="mini"  :disabled="step!==2"  v-model="scope.row.quantity" @change="handleChangeQuantity(scope.row)" :min="1" :max="10" ></el-input-number>
                  </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                  <el-button size="small" type="text" :disabled="step!==2" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
          </el-card>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import {makeNewSale,enterItem,endSale,makePayment,changeQuantity,deleteSaleItem} from '@/api/sale.js'
import {getProductBySn} from '@/api/product.js'
export default {
  name: "Sale",
  // 定义属性
  data() {
    return {
      // 当前步骤，用于控制按钮是否可用
      step: 1,
      // 商品输入表单
      enterItemForm: {},
      // 支付表单 
      makePaymentForm: {},
      // 订单信息
      orderInfo: {},
      // 找零
      changeDue: 0,
      // 订单明细
      saleItemList: [],
      // 总件数
      totalQuantity: 0,
      // 表单校验规则
      enterItemRules: {
            itemSn: [
                { required: true, message: "商品编码不能为空", trigger: "blur" }
            ],
            quantity: [
                { required: true, message: "数量不能为空", trigger: "blur" },
                { type: 'number', message: '数量必须为数字'}
            ]
      },
      makePaymentRules: {
            cashTendered: [
                { required: true, message: "付款金额不能为空", trigger: "blur" },
                { type: 'number', message: '付款金额必须为数字'}
            ]
      }
    };
  },
  // 计算属性
  computed: {},
  // 监听saleItemList及其对象元素变化
  watch: {
     saleItemList:{
        handler(val) {
            let sum = 0;
            val.map(item => sum = item.quantity + sum)
            this.totalQuantity = sum;
        },
        deep: true // 深度监听数组对象
    }
  },
  // 生命周期-创建完成
  created() {
    this.clear();
  },
  // 生命周期-挂载完成
  mounted() {
  },
  // 方法集合
  methods: {
    //步骤1：创建订单
    makeNewSale(){
      this.clear();
      makeNewSale().then(response => {
        this.orderInfo = response.data;
        this.orderInfo.quantity = 0;
      });
      this.step = 2;
    },
    // 步骤2：提交输入商品
    enterSaleItem(){
      // itemSn是否已经录入，-1为未录入
      //判断数组是否有某元素
      const index = this.saleItemList.findIndex((item) => item.itemSn == this.enterItemForm.itemSn);
        enterItem(this.enterItemForm).then(response =>{
            if(response.code === 200) { // 是否找到商品
                // 手动维护前端数组与后端list数组一致性
                if(index==-1){
                    this.saleItemList.push(response.data);
                } else {
                    this.saleItemList[index].quantity = this.saleItemList[index].quantity + response.data.quantity;
                }
            } else {
                this.$message.error(response.msg);
            }
        })
    },
    // 步骤3：结束输入
    endSale(){
      endSale().then(response => {
        this.orderInfo.total = response.data;
      });
      this.step = 4;
    },
    // 步骤4：提交支付
    makePayment(){
      this.step = 1;
      if(this.makePaymentForm.cashTendered >= this.orderInfo.total) {
            makePayment(this.makePaymentForm).then(response =>{
                this.changeDue = response.data;
                this.$message.success("支付成功!找零"+this.changeDue +"元");
            })
            this.step = 1;
        } else {
            this.$message.warning("付款金额小于订单总金额");
        }
    },
    // 修改一行订单明细数量
    handleChangeQuantity(row){
      changeQuantity(row).then(response => {
        this.$message.success(response.msg);
       
      });
      

    },
    // 删除一行订单明细
    handleDelete(row){
      const index = row.index -1;
       this.saleItemList.splice(index,1);
       deleteSaleItem(row.itemSn).then(response =>{
            this.$message.success(response.msg);
       })
    },
    // 清空界面数据
    clear(){
        this.orderInfo = {};
        this.saleItemList = [];
        this.enterItemForm = {
            itemSn: '',
            quantity: 1
        };
        this.makePaymentForm = {
            cashTendered: 0
        };
        this.changeDue = 0;
        this.totalQuantity = 0;
        this.step = 1;
    },
    //为table订单明细添加序号
    rowSaleItemIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    }

  },
};
</script>

<style scoped>
</style>